<template>
  <div class="wechat-editor">
    <div class="editor-wrapper">
      <!-- 工具栏 -->
      <Toolbar :mode="mode" class="editor-toolbar" :editor="editor" :defaultConfig="toolbarConfig" />

      <!-- 编辑区域 -->
      <div class="editor-content">
        <input v-model="title" placeholder="请输入标题" class="editor-title" @focus="handleTitleFocus"
          @blur="handleTitleBlur">
        <Editor class="editor-body" :defaultConfig="editorConfig" v-model="html" @onChange="onChange"
          @onCreated="onCreated" @onFocus="handleEditorFocus" />
      </div>
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  name: "WechatEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      title: '',
      editor: null,
      mode: "default",
      isTitleFocused: false,
      html: "<p><br></p>",
      toolbarConfig: {
        excludeKeys: [
          'fullScreen', 'uploadVideo', 'group-video',
          'emotion', 'code', 'todo', 'codeBlock', 'insertImage'
        ],
      },
      editorConfig: {
        placeholder: "请输入正文内容...",
        MENU_CONF: {},
      },
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    onChange(editor) {
      console.log("内容变化:", editor.getHtml());
    },
    handleTitleFocus() {
      this.isTitleFocused = true;
    },
    handleTitleBlur() {
      this.isTitleFocused = false;
    },
    handleEditorFocus() {
      this.isTitleFocused = false;
    }
  },
  beforeDestroy() {
    if (this.editor) this.editor.destroy();
  }
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.wechat-editor {
  // max-width: 800px;
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;

  .editor-wrapper {
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    overflow: hidden;
  }

  .editor-toolbar {
    border-bottom: 1px solid #e7e7e7;
    background: #f9f9f9;
    padding: 8px 16px;
  }

  .editor-content {
    padding: 0 16px;
  }

  .editor-title {
    width: 100%;
    border: none;
    outline: none;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    padding: 20px 0 15px;
    margin: 0;
    color: #222;
    border-bottom: 1px solid #f0f0f0;
    transition: border-color 0.3s;
    text-align: center;

    &:focus {
      // border-bottom-color: #000;
    }

    &::placeholder {
      color: #999;
      font-weight: normal;
    }
  }

  ::v-deep .w-e-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 8px 16px;
    margin-bottom: 8px;
  }

  /* 调整编辑器内容区域 */
  .editor-body {
    min-height: 400px;
    padding: 16px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-top: 8px;
    /* 为小工具栏留出空间 */
  }

  // /* 覆盖wangEditor默认样式 */
  // ::v-deep .w-e-text-container {
  //   border: none !important;
  //   box-shadow: none !important;
  // }

  // ::v-deep .w-e-bar {
  //   background: transparent !important;
  //   border-bottom: none !important;
  // }
}
</style>